<script setup lang='ts'>
import { computed, reactive, ref } from 'vue';
import { getTreeList } from '@/api/interface/http1';
// import { inject } from 'vue';

// const reload: any = inject('reload');
const input = ref('');
const input1 = ref('');
const input2 = ref('');
const value = ref('');
const props = {
    expandTrigger: 'hover' as const
};
// 实现分页
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = ref(0);
const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return tableData.value.slice(start, end);
});


const handleCurrentChange = (newPage: number) => {
    currentPage.value = newPage;
};

const handleSizeChange = (newSize: number) => {
    pageSize.value = newSize;
};
let params = reactive({
    pageSize: 185,
    pageNum: 1,
    title: '',
    stuNum: '',
    studentName: '',
    studentId: '',
    className: ''
});
// 请求
let tableData = ref([]);
const options = ref([]);
const newlist = ref([]);

function getList() {
    getTreeList(params).then(res => {
        tableData.value = res.rows;
        totalItems.value = res.total;
        // console.log(tableData);
        options.value = res.rows.map(item => {
            return {
                value: item.studentId,
                label: item.className
            };
        });
        //去重
        let obj = <any>{};
        newlist.value = options.value.reduce((cur, next) => {
            obj[next.label] ? '' : (obj[next.label] = true && cur.push(next));
            return cur;
        }, []);
        //去空
        newlist.value=newlist.value.filter(item=>{
            return item.label!=null
        })
        // console.log(newlist.value);
    });
}

getList();

// 搜索
function handleChange(item: { label: string; }) {
    value.value = item.label;

}

let Search = () => {
    currentPage.value = 1
    params.title = input1.value;
    params.studentName = input.value;
    params.stuNum = input2.value;
    params.className = value.value;
    // console.log(value.value);
    getList();
};
// 重置
let reset = () => {
    input.value = '';
    input1.value = '';
    input2.value = '';
    value.value = '';
    Search();
};

//班级

//表格
const dialogVisible = ref(false);
// 查看
let ruleForm = ref({
    title: '',
    updateTime: '',
    content: ''
});
const viewClick = (row: any) => {
    console.log('详情按钮', row);

    dialogVisible.value = true;
    ruleForm.value = row;
};

</script>

<template>
    <div>
        <div class='boxTop'>
            <div>
                <label for=''>标题信息</label>
                <el-input
                    v-model='input1'
                    style='width: 190px;height: 36px'
                    placeholder='请输入标题'
                    @input = "Search"
                    clearable
                />
                <label for=''>学生姓名</label>
                <el-input
                    v-model='input'
                    @input = "Search"
                    style='width: 190px;height: 36px'
                    placeholder='请输入学生姓名'
                    clearable
                />
                <label style='margin-left: 60px'>班级</label>
                <el-select v-model='value' placeholder='请输入班级' style='width: 190px' clearable>
                    <el-option
                        v-for='item in newlist'
                        :key='item.value'
                        :label='item.label'
                        :value='item'
                        @click='handleChange(item)'
                    />
                </el-select>
                <label style='margin-left: 80px'>学号</label>
                <el-input
                    v-model='input2'
                    @input = "Search"
                    style='width: 190px;height: 36px'
                    placeholder='请输入学号'
                    clearable
                />
                <el-button style='width: 70px;height: 36px' @click='reset'>重置</el-button>
                <el-button type='primary' style='width: 70px;height: 36px' @click='Search'>搜索</el-button>
            </div>
        </div>
        <div class='section'>
            <el-table :data='paginatedData' border style='width: 100%;'>
                <el-table-column type='index' width='80' label='序号' />
                <el-table-column prop='title' label='标题信息'  />
                <el-table-column prop='studentName' label='学生姓名' width='80' />
                <el-table-column prop='className' label='班级' width='180' />
                <el-table-column prop='stuNum' label='学号' width='80' />
                <el-table-column prop='createTime' label='发布时间' width='170'>
                </el-table-column>
                <el-table-column label='操作' width='200'>
                    <template #default='scope'>
                        <el-button plain @click='viewClick(scope.row)' style='background-color: transparent;border: none;color: #409EFF'>
                            <span style='font-size: 12px'>查看</span>
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-dialog
                v-model='dialogVisible'
                title='详细信息'
                width='830'
            >
                <div style='float: right'>{{ ruleForm.updateTime }}</div>
                <div class='contentTree'>
                    <!--                                //标题信息-->
                    <p style='font-weight: 700;font-size: 16px'>{{ ruleForm.title }}</p>
                    <!--                                //树洞信息-->
                    <p>{{ ruleForm.content }}</p>
                </div>
            </el-dialog>
        </div>
        <div class='footer'>
            <el-pagination small background @sizeChange='handleSizeChange' @currentChange='handleCurrentChange'
                           :current-page='currentPage' :page-sizes='[10, 20, 30, 40]' :page-size='pageSize'
                           :total='totalItems'>
            </el-pagination>
        </div>
    </div>

</template>

<style scoped lang='less'>
.boxTop {
    box-sizing: border-box;
    height: 60px;
    //padding-left: 28px;

    > div {
        label {
            color: #606266;
            font-size: 14px;
            font-weight: 700;
            margin-left: 45px;
            margin-right: 10px;
        }

        button {
            margin-left: 10px;
        }


    }
}
::v-deep(.el-input__wrapper) {
    width: 200px;
    height: 36px;
}
.section {
    padding: 0px 20px;
    margin-top: 10px;

    :deep(.el-table__row) {
        height: 52px;

        td {
            text-align: center;
        }
    }

    :deep(.cell ) {
        height: 27px;
        line-height: 27px;
        text-align: center;

        svg {
            color: white;
        }
    }

    :deep(.el-dialog__header) {
        text-align: left;

        svg {
            color: white;
        }

        width: 830px;
        background-color: rgb(24, 146, 255);

        .el-dialog__title {
            color: white;
        }
    }

    .contentTree {
        padding-top: 20px;
        padding-bottom: 10px;
        margin: auto;
        margin-top: 30px;
        width: 700px;
        background-color: #eeeeee;
        text-align: left;

        p {
            margin-left: 10px;
            margin-bottom: 20px;
        }
    }
}

.footer {
    float: right;
    margin-top: 30px;
    margin-bottom: 20px;
    margin-right: 50px;
}
</style>
